<template>
  <div class="model" v-show="isShow2">
    <div class="mask"></div>
    <div class="layui-layer layui-layer-page" :class="{ active: isShow2 }">
      <div class="layui-layer-title">
        签到活跃榜 -TOP
        <i class="layui-icon layui-icon-close" @click="close">X</i>
      </div>
      <div class="layui-layer-content" style="padding: 0">
        <div class="layui-tab layui-tab-brief">
          <ul class="layui-tab-title">
            <li :class="{ 'layui-this': current === 0 }" @click="choose(0)">
              最新签到
            </li>
            <li :class="{ 'layui-this': current === 1 }" @click="choose(1)">
              今日最快
            </li>
            <li :class="{ 'layui-this': current === 2 }" @click="choose(2)">
              总签到榜
            </li>
          </ul>
          <div class="layui-tab-content">
            <ul class="layui-tab-item layui-show">
              <li v-for="(item, index) in lists" :key="'sign' + index">
                <img class="pic" :src="item.uid.pic" alt="" />
                <router-link
                  class="fly-link"
                  :to="{ name: 'home', params: { uid: item.uid._id } }"
                  >{{ item.uid.name }}</router-link
                >
                <span class="fly-grey" v-if="current !== 2"
                  >签到于{{ item.created | moment }}</span
                >
                <span class="fly-grey" v-else
                  >已经连续签到<i class="orange"
                    >{{ item.uid.count }}天</i
                  ></span
                >
              </li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSign } from '@/api/sign'
export default {
  name: 'signlist',
  components: {},
  props: {
    isShow2: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      current: 0,
      limit: 8,
      lists: []
    };
  },
  computed: {},
  watch: {
    current (newval, oldval) {
      this.getsign();
    },
  },
  mounted () {
    this.getsign()
  },

  methods: {
    choose (val) {
      this.current = val
    },
    close () {
      this.$emit('closeModel')
    },
    getsign () {
      getSign({
        current: this.current,
        limit: this.limit,
      }).then((res) => {
        if (res.code === 200) {
          console.log(res.data);
          this.lists = res.data
        }
      })
    }
  }
}

</script>
<style scoped lang='scss' >
.fly-link {
  padding: 0 5px;
  color: #ff5722;
  font-style: normal;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.mask {
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.layui-layer {
  position: fixed;
  width: 300px;
  height: 480px;
  top: 50%;
  left: 50%;
  margin-top: -240px;
  margin-left: -150px;
  background: #ffff;
  z-index: 10100;
  &.active {
    animation-fill-mode: both;
    animation: bounceIn, 0.2s;
  }
}
.layui-layer-title {
  height: 42px;
  padding-left: 20px;
  line-height: 42px;
  color: #333;
  padding-right: 10px;
  background-color: #f8f8f8;
}
.layui-layer-content {
  padding: 20px;
}
.layui-icon {
  cursor: pointer;
  float: right;
}
.pic {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  margin-right: 10px;
}
.layui-tab-item {
  line-height: 45px;
  li {
    border-bottom: 1px dotted #dcdcdc;
    &:last-child {
      border-bottom: none;
    }
  }
}
.layui-tab-content {
  padding: 0 10px;
}
</style>